import { useState, useCallback } from "react";
import { Button } from "antd";
import UseCallbackChild from "./UseCallbackChild.jsx";

function UseCallback() {
  console.log(" UseCallback render ...");
  const [a, setA] = useState({ age: 0 });
  const [b, setB] = useState({ age: 0 });

  function addA() {
    setA({ age: a.age + 1 });
  }

  function addB() {
    setB({ age: b.age + 1 });
  }

  const addBTemp = useCallback(() => {
    setB({ age: b.age + 1 });
  }, [b]);

  return (
    <>
      a:{a.age}{" "}
      <Button onClick={addA} type="primary">
        {" "}
        +1{" "}
      </Button>
      <UseCallbackChild b={b} addB={addBTemp}></UseCallbackChild>
    </>
  );
}
export default UseCallback;
